<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div,p{margin: 0;padding: 0;}
			#wrap{
				width: 224px;
				height: 239px;
				margin: 50px auto;
				position: relative;
				overflow: hidden;
			}
			.imgbox{
				position: absolute;
				top: 0px;
				left: 0px;
			}
			.btn{
				width: 100%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				position: absolute;
				left: 0px;
				background: rgba(0,0,0,0.5);
				color: #fff;
			}
			.pre{
				top: 0px;
			}
			.next{
				bottom: 0px;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="imgbox">
				<img src="images/scroll1.png" />
				<img src="images/scroll2.png" />
				<img src="images/scroll3.png" />
			</div>
			<p class="btn pre">上</p>
			<p class="btn next">下</p>
		</div>
		<script>
			var oWrap = document.getElementById('wrap');
			var aImgbox = oWrap.getElementsByClassName('imgbox')[0];
			var abtn =oWrap.getElementsByClassName('btn');
			var num = 0;
			var timer = null;
			for (var i = 0; i < abtn.length; i++) {
				abtn[i].index = i;
				abtn[i].onmousedown = function(){
					var THis = this;
						timer = setInterval(function(){
							if (THis.index) {//下
								
								num++;
								if (num>=0) {
									num = 0
								}
								
							} else {//上
								
								num--;
								if (num<=-520) {
									num = -520
								}
								
							}
							console.log(num)
							aImgbox.style.top = num +'px';
						},10)					
				}
				abtn[i].onmouseup = function(){
					clearInterval(timer);
				}
			}
			
		</script>
	</body>
</html>
